<template>
    <div>
        <el-button icon="el-icon-d-arrow-right" size="mini" @click="dialogVisible = true">详情</el-button>
        <el-dialog  :visible.sync="dialogVisible" width="70%">
            <div class="detailBox">
                <div class="top">
                    <div class="img">
                        <img :src="'http://gyt2bs.natappfree.cc/' + 'media/MarkerPIC/' + detail.ID + '.jpg'" alt="">
                    </div>
                    <div class="messages">
                        <div><span>名称：{{detail.hanzi}},</span>  <span>拼音：{{ detail.Pinyin}}</span></div>
                        <div><span>解释：{{detail.FText}}</span></div>
                        <div><span>类别：{{detail.RSType}}</span></div>
                        <div><span>作者：{{detail.author}}</span></div>
                        <div><span>书名：《{{detail.BookName}}》,</span><span>编号：{{ detail.SerialNo }},</span> <span>出版社：{{detail.express}}</span></div>
                    </div>
                </div>
                <el-button type="primary" @click="dialogVisible = false" class="btn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'myDialog',
    props: {
        // dialogVisible: {
        //     type: Boolean,
        //     default: false
        // },
        detail: {
            type: Object,
        }
    },
    data() {
        return {
            dialogVisible: false
        }
    },
    mounted() {
        console.log(this.detail, this.dialogVisible)
    },
    methods: {
        // handleClose(done) {
        //     this.$confirm('确认关闭？')
        //         .then(_ => {
        //             done();
        //         })
        //         .catch(_ => { });
        // }
    }
}
</script>

<style lang="scss" scoped>
.detailBox {
    // background-color: pink;
    height: 400px;
    display: flex;
    flex-direction: column;
    padding: 0;

    .top {
        display: flex;
        flex-direction: column;

        .messages {
            display: flex;
            flex-direction: column;
            width: 600px;
            margin: 0 0 0 50px;

            // background-color: pink;
            div {
                text-align: left;
                // background-color: skyblue;
                width: 900px;
                margin: 10px;
                border-bottom: 1px solid #999;
                font-size: 19px;
                font-weight: 500;
            }
        }

        .img {
            margin: 0;
        }
    }

    .btn {
        width: 100px;
        margin: 50px 0 0 800px;
    }
}
</style>